<template>
    <div class="app">
        <div class="nav">
            <Navict />
        </div>
        <div class="main">
            <div class="title">
                <span>数据看板</span>
            </div>
            <div class="choice">
                <el-select
                    v-model="value"
                    class="m-2"
                    placeholder="Select"
                    style="width: 240px"
                >
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </div>
            <div class="clound">
                <div id="wordCloud" class="wordcloud"></div>
            </div>
            <div class="line">
                <div class="line-l" id="pie"></div>
                <div class="line-r" id="line"></div>
            </div>
            <div class="line-stack">
                <div class="line_stack" id="line_stack"></div>
            </div>
            <div class="line">
                <div class="line-l" id="circle"></div>
                <div class="line-r" id="donxiang"></div>
            </div>
        </div>
        <div>
            <BottomNavict />
        </div>
    </div>
</template>

<script setup>
import Navict from '@/components/Navict.vue'
import axios from 'axios'
import { ref } from 'vue'
import * as echarts from "echarts"
import 'echarts-wordcloud'
import { onMounted,watch } from 'vue'
import BottomNavict from './BottomNavict.vue'


//词云图
function init(data) {
        var myChart = echarts.init(document.getElementById('wordCloud'));
        const option = {
            title: {
                text: '',
                x: "center"
            },
            backgroundColor: "#fff",
            // tooltip: {
            //   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
            // },
            series: [
                {
                    type: "wordCloud",
                    //用来调整词之间的距离
                    gridSize: 10,
                    //用来调整字的大小范围
                    // Text size range which the value in data will be mapped to.
                    // Default to have minimum 12px and maximum 60px size.
                    sizeRange: [14, 40],
                    // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
                    //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
                    // rotationRange: [-45, 0, 45, 90],
                    // rotationRange: [ 0,90],
                    rotationRange: [0, 0],
                    //随机生成字体颜色
                    // maskImage: maskImage,
                    textStyle: {
                        color: function () {
                            return (
                                "rgb(" +
                                Math.round(Math.random() * 255) +
                                ", " +
                                Math.round(Math.random() * 255) +
                                ", " +
                                Math.round(Math.random() * 255) +
                                ")"
                            );
                        }
                    },
                    //位置相关设置
                    // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
                    // Default to be put in the center and has 75% x 80% size.
                    left: "center",
                    top: "center",
                    right: null,
                    bottom: null,
                    width: "100%",
                    height: "100%",
                    //数据
                    data: data
                }
            ]
        };
        myChart.setOption(option);
        // 点击某个字
        myChart.on('click', function (params) {
            console.log('myChart----click---:', params, '------', params.data)
    });
}

//饼图
function pie(data){
    var myChart = echarts.init(document.getElementById('pie'));
    const option = {
        title: {
            text: '薪资情况',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
            name: '月薪情况',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
                itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
            }
        ]
    };
    myChart.setOption(option);          
}

//折线图
function line(data){
    var myChart = echarts.init(document.getElementById('line'));
    const option = {
        tooltip: {
            trigger: 'item'
        },
        title: {
            text: '各经验平均薪资',
            left: 'center'
        },
        xAxis: {
            type: 'category',
            data: data.name
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: data.value,
            type: 'line'
            }
        ]
    };
    myChart.setOption(option);
}

//折线堆叠图
function line_stack(data){
    var myChart = echarts.init(document.getElementById('line_stack'));
    const option = {
        title: {
            text: '各经验最高薪资与最低薪资对比(K)'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['最高薪资','最低薪资']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.name
        },
        yAxis: {
            type: 'value',
            data: data.max
        },
        series: [
            {
            name: '最高薪资',
            type: 'line',

            data: data.max,
            areaStyle: {},
            },
            {
            name: '最低薪资',
            type: 'line',

            data: data.min,
            areaStyle: {},
            }
        ]
    };
    myChart.setOption(option);
}


//岗位饼图
function pie_dongxiang(data){
    var myChart = echarts.init(document.getElementById('donxiang'));
    const option = {
        title: {
            text: '岗位数量',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
            name: '岗位数量',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
                itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
            }
        ]
    };
    myChart.setOption(option); 
}

//圆环图
function rose(data){
    var myChart = echarts.init(document.getElementById('circle'));
    const option = {
        title: {
            text: '高薪岗位（8K以上）经验情况',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            emphasis: {
                label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
                }
            },
            data: data,
            }
        ]
    };
    myChart.setOption(option);
}

//饼图请求
function pie_(){
    axios({
        method: "get",
        url: "http://127.0.0.1:8080/jobs/pie",
    }).then(res=>{
        if(res.data.code === 200){
            pie(res.data.result)
        }
    })
}

//词云请求
function wordCloud_jobname() {
    axios({
        method: "get",
        url: "http://127.0.0.1:8080/jobs/clound/name",
    }).then(res=>{
        if(res.data.code === 200){
            init(res.data.result)
        }
    })

}

//折线图请求
function line_(){
    axios({
        method: "get",
        url: "http://127.0.0.1:8080/jobs/line",
    }).then(res=>{
        if(res.data.code === 200){
            line(res.data.result)
        }
    })
}

//折线堆叠图请求
function line_stack_(){
    axios({
        method: "get",
        url: "http://127.0.0.1:8080/jobs/maxmin",
    }).then(res=>{
        if(res.data.code === 200){
            line_stack(res.data.result)
        }
    })
}

//玫瑰图请求
function pie_dongxiang_(){
    axios({
        method: "get",
        url: "http://127.0.0.1:8080/jobs/count",
    }).then(res=>{
        if(res.data.code === 200){
            pie_dongxiang(res.data.result)
        }
    })
}

//圆环图请求
function rose_(){
    axios({
        method: "get",
        url: "http://127.0.0.1:8080/jobs/highsalary",
    }).then(res=>{
        if(res.data.code === 200){
            rose(res.data.result)
        }
    })
}
onMounted(() => {
    wordCloud_jobname()
    pie_()
    line_()
    line_stack_()
    pie_dongxiang_()
    rose_()
})
const value = ref('岗位词云')

const options = [
  {
    value: 'job_c',
    label: '岗位词云',
  },
  {
    value: 'ltd_c',
    label: '企业词云',
  }]

watch(value, (val) => {
    if(val === 'job_c'){
        wordCloud_jobname()
    }else{
        axios({
            method: "get",
            url: "http://127.0.0.1:8080/jobs/clound/ltd",
        }).then(res=>{
            if(res.data.code === 200){
                init(res.data.result)
            }
        })
    }
})
</script>

<style scoped>
    .app{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .main{
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .clound{
        width: 90%;
        height: 500px;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .line-stack{
        width: 90%;
        height: 500px;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .line_stack{
        width: 100%;
        height: 100%;
    }
    .line{
        width: 90%;
        height: 500px;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
    }
    .line-l{
        width: 40%;
        height: 100%;
    }
    .line-r{
        width: 60%;
        height: 100%;
    }
    .wordcloud{
        width: 100%;
        height: 100%;
    }
    .title{
        font-size: 30px;
        color: #70b6fe;
        font-weight: 600;
    }
    .choice{
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
        
    }
    .m-2{
        box-shadow: 1px 1px 1px 1px;
    }
</style>